<template>
	<view class="page pd-30" v-if="Object.keys(teacherDetail).length > 0">
		<comHead :datas="datasObj"></comHead>
		<view class="card pd-20">
			<view class="flex" style="align-items: flex-start;">
				<view class="img">
					<image style="border-radius: 50%; z-index: 1;width: 96rpx;height: 96rpx;" mode="aspectFill"
						:src="teacherDetail.avatar"></image>
				</view>
				<view class="ml-20">
					<view class="flex"> <text class="ft1">{{ teacherDetail.nickname_show }}</text>
						<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/boy.png"
							v-if="teacherDetail.sex === '男'"></image>
						<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/girl.png"
							v-else-if="teacherDetail.sex === '女'"></image>
					</view>
					<view class="flex-start"
						v-if="teacherDetail.area_show || teacherDetail.place_show || teacherDetail.constellation">
						<view class="flex-center ticCard ft c-66" v-if="teacherDetail.area_show">
							<image class="wh-24 mr-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon12.png">
							</image>
							<text class="ft c-66">{{ teacherDetail.area_show }}</text>
						</view>
						<view class="flex-center ticCard ft c-66" v-if="teacherDetail.place_show">
							籍贯：{{ teacherDetail.place_show }}</view>
						<view class="flex-center ticCard ft c-66" v-if="teacherDetail.constellation">
							{{ teacherDetail.constellation }}</view>
					</view>
				</view>
			</view>
			<view class="flex-center  mt-20 card_2">
				<view class="ft flex-center">
					<text class="ft mr-8 c-66">好评率</text>
					<text class="ft-num ft-32 c-33">{{ teacherDetail.good_percent }}%</text>
				</view>
				<text class="line"
					style="display: inline-block;width: 2rpx;height: 28rpx;background-color: #F1F1F1;margin-left: 40rpx;margin-right: 40rpx;"></text>
				<view class="ft flex-center">
					<text class="ft mr-8 c-66">咨询数</text>
					<text class="ft-num ft-32 c-33">{{ teacherDetail.consult_num }}</text>
				</view>
				<text class="line"
					style="display: inline-block;width: 2rpx;height: 28rpx;background-color: #F1F1F1;margin-left: 40rpx;margin-right: 40rpx;"></text>
				<view class="ft flex-center">
					<text class="ft mr-8 c-66">点赞</text>
					<text class="ft-num ft-32 c-33">{{ teacherDetail.like_num }}</text>
				</view>
			</view>
		</view>
		<view class="card1 mt-20 pd-20 flex">
			<view class="right" style="border-right: 2rpx solid #f1f1f1; padding-right: 20rpx">
				<view class="ft"><text class="ft1 mr-8">{{ evaluateInfo.good_percent }}%</text><text
						class="ft c-99">好评率</text></view>
				<view class="mt-20">
					<!-- <up-rate :value="evaluateInfo.avg_star" activeColor="#333" size="22rpx"
						readonly></up-rate> -->
					<comRate ref="comRate" v-if="evaluateInfo.avg_star" :num="evaluateInfo.avg_star" disabled>
					</comRate>
				</view>
			</view>
			<view class="ft ml-20">
				<view class="ft c-33 fw-800">共有{{ evaluateInfo.pageInfo.total }}条评价</view>
				<view class="ft mt-20 c-99">{{ teacherDetail.consult_num }}人咨询</view>
			</view>
		</view>
		<view class="flex tabList mt-10">
			<view :class="{ active: selctTab === item.id }" class="tab ft flex-center c-99"
				v-for="(item, index) in tabList" :key="item.id" @click="selectTabs(item.id)">
				{{ item.des + item.num + "" }}
			</view>
		</view>
		<view class="thrumb mt-30 flex pd-20" v-if="teacherDetail.like_list.length > 0">
			<view style="width: 526rpx;">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
					<view class="flex">
						<view class="avtor" v-for="(item, index) in teacherDetail.like_list" :key="index">
							<image class="img" :src="item.avatar" mode="aspectFill"></image>
							<image class="img2" src="https://cdn.oss.bon-top.cn/static_bc/images/tumb.png">
							</image>
						</view>
					</view>

				</scroll-view>
			</view>
			<view class="ft flex-center c-66" style="width: 184rpx;"> {{ teacherDetail.like_num + '人点赞了' }}</view>
		</view>
		<view class="caseBox mt-30">
			<view class="ft c-99 pd-20" >{{ "全部评论" }}</view>

			<template v-for="(item, index) in evaluateList" :key="index">
				<commentCard :parmas="item" @refresh="selectTabs(selctTab)" @refreshOne="refreshEvaluateInfo(index)"
					@subReport="subReport">
				</commentCard>
			</template>
		</view>
		<view style="height: 68rpx;"></view>
	</view>
</template>

<script setup lang="js">
import {
	reactive, ref
} from "vue";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";
import {
	onLoad,
	onShow,

	onReachBottom
} from "@dcloudio/uni-app";
import thrumb from '@/components/thrumb.vue';
import commentCard from '@/components/commentCard.vue'
import comHead from '@/components/comHead.vue';
import comRate from '@/components/comRate.vue'

let datasObj = reactive({
	title: '老师评价',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
})
const goReply = () => {
	uni.navigateTo({
		url: "/subpackage/search/reply"
	})
}
const subReport = () => {
	evaluateList.value.forEach(f => {
		f.isMore = false
	})
}
const id = ref(null)
onLoad((options) => {
	if (options.sale_id) {
		id.value = options.sale_id
		getSaleDetailData(options.sale_id)
		getSaleEvaluateData(options.sale_id)
	}
});

//获取老师详情接口
const teacherDetail = ref({})
const getSaleDetailData = (id) => {
	utils
		.request(
			api.getSaleDetail, {
			id: id
		},
			"get"
		)
		.then((res) => {
			teacherDetail.value = res.data.info;
		});
};

//评价信息
const tabList = ref([])
const evaluateInfo = ref({})
const evaluatePage = ref(1)
const evaluateList = ref([])
const evaluateLoading = ref(true)
const getSaleEvaluateData = (id) => {
	if (!evaluateLoading.value) {
		return
	}
	evaluateLoading.value = false

	utils
		.request(
			api.getEvaluateList, {
			sale_id: id,
			tag_id: selctTab.value,
			page: evaluatePage.value,
			pageSize: 5,
		},
			"get"
		)
		.then((res) => {
			if (tabList.value.length == 0) {
				evaluateInfo.value = res.data
				tabList.value.push({
					id: '',
					des: '全部',
					num: res.data.pageInfo.total
				})
				res.data.tag_list.map((item) => {
					tabList.value.push({
						id: item.id,
						des: item.name,
						num: item.num
					})
				})
			}
			evaluatePage.value++
			if (res.data.items.length > 0) {
				evaluateList.value = evaluateList.value.concat(res.data.items)
				evaluateLoading.value = true
				evaluateList.value.forEach(f => {
					f.isMore = false
				})
			}
		});
}

const selctTab = ref('');
const selectTabs = (idx) => {
	selctTab.value = idx
	evaluatePage.value = 1
	evaluateList.value = []
	evaluateLoading.value = true
	getSaleEvaluateData(id.value)
	evaluateList.value.forEach(f => {
		f.isMore = false
	})
}

onReachBottom(() => {
	getSaleEvaluateData(id.value)
})
</script>

<style lang="scss" scoped>
.card {
	width: 690rpx;
	height: 236rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.card_2 {
		width: 650rpx;
		height: 74rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.ticCard {
		// width: 168rpx;
		padding-left: 12rpx;
		padding-right: 12rpx;
		height: 58rpx;
		background: #F1F1F1;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-right: 20rpx;
		margin-top: 4rpx;
	}
}

.card1 {
	width: 690rpx;
	height: 128rpx;
	background: linear-gradient(180deg, #fbffdf 0%, #ffffff 100%);
	border-radius: 40rpx 40rpx 40rpx 40rpx;
}

.tabList {
	flex-wrap: wrap;
}

.tab {
	//width: 220rpx;
	//padding: 8rpx 12rpx;
	height: 58rpx;
	box-sizing: border-box;
	padding-top: 8rpx;
	padding-bottom: 8rpx;
	padding-left: 12rpx;
	padding-right: 12rpx;

	background: #f8f8f8;
	border-radius: 34rpx;
	margin-right: 20rpx;
	margin-top: 20rpx;
}

.active {
	background: #dbf046;
	color: #666;
}

.caseBox {
	width: 690rpx;
	background: #f8f8f8;
	border-radius: 40rpx;

	.combination {
		width: 172rpx;
		height: 54rpx;
		background: #ffffff;
		border-radius: 28rpx;
	}

	.line {
		width: 446rpx;
		height: 0rpx;
		border-bottom: 2rpx solid #f1f1f1;
	}

	.nextCase {
		width: 562rpx;
		height: 530rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 40rpx 40rpx;

		.casess {
			width: 160rpx;
			height: 54rpx;
			background: #f8f8f8;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}
}

.thrumb {
	width: 690rpx;
	height: 108rpx;
	background: #F8F8F8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.avtor {
		position: relative;

		.img {
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.img2 {
			width: 28rpx;
			height: 28rpx;
			border-radius: 50%;
			position: absolute;
			bottom: 10rpx;
			right: 10rpx;
		}
	}

}
</style>